<template>
  <li>
    <swiper class="swiper" circular="true" autoplay="true" interval="2000" duration="1000">
      <block v-for="(item, index) in movies" :index="index" :key="item">
        <swiper-item>
          <image :src="item.url" class="slide-image" mode="aspectFill" />
        </swiper-item>
      </block>
    </swiper>
    <i-tabs :current="current" @change="handleChange">
      <i-tab key="tab1" title="待上课"></i-tab>
      <i-tab key="tab2" title="已上课"></i-tab>
    </i-tabs>
    <view v-if="tab11" class="tab1">
      <div class="bigbox">
        <!-- <div v-for="(itemd,idx) of newsList" :key="idx"> -->
        <div class="list" v-for="(item,index) of alreadyclass" v-show="item.n[0].start>newtime"  :key="index">
          <!-- <p>{{item.start}}</p> -->
          <lessonCell :title="item.m" :content="item.n"  />
          <!-- </div> -->
        </div>
      </div>
      <div class="laodMore">
        <div v-show="logStatus === 0">
          <div>上拉加载</div>
        </div>
        <div v-show="logStatus === 1">
          <div>正在加载</div>
        </div>
        <div v-show="logStatus === 2">
          <div>没有更多数据了</div>
        </div>
      </div>
    </view>
    <view v-if="tab12" class="tab2">
      <div class="bigbox">
        <!-- <div v-for="(itemd,idx) of oldList" :key="idx"> -->
        <div class="list" v-for="(item,index) of map"  :key="index">
          <listijd :titlee="item.m" :contents="item.n" />
        </div>
      </div>
      <!-- </div> -->
      <div class="laodMore">
        <div v-show="logStatus === 0">
          <div>上拉加载</div>
        </div>
        <div v-show="logStatus === 1">
          <div>正在加载</div>
        </div>
        <div v-show="logStatus === 2">
          <div>没有更多数据了</div>
        </div>
      </div>
    </view>
  </li>
</template>

<script>
import card from "@/components/card";
import lessonCell from "@/components/lessonCell/index";
import listijd from "@/components/listijd/index";
import { async } from 'q';
export default {
  data() {
    return {
      logStatus: 0,
      motto: "Hello miniprograme",
      userInfo: {
        nickName: "mpvue"
        // avatarUrl: 'http://mpvue.com/assets/logo.png'
      },
      movies: [
        {
          url:
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/banner@2x.png"
        },
        {
          url:
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/banner@2x.png"
        },
        {
          url:
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/banner@2x.png"
        }
      ],
      current: "tab1",
      tab11: true,
      tab12: false,
      map: [],
      alreadyclass:[],
      newtime: new Date(new Date().toLocaleDateString()).getTime(),
      noData: false,
      currentPage: 1,
      currentpa: 1,
      oldList: [],
      newsList: [],
      newmap: [],
      oldmap: [],
      demoEventss:[],
      allLessons:[]
    };
  },
  watch: {
    $route() {
      this.start();
    },
    currentPage() {
      this.other();
    },
    currentpa() {
      this.pain();
    }
  },
  onReachBottom() {
    this.onScroll();
  },
  computed: {},
  components: {
    card,
    lessonCell,
    listijd
  },
 onShow(){
      this.map= []
      this.alreadyclass=[]
       this.demoEventss=[]
      this.allLessons=[]
    this.start();
 },
  mounted() {
    this.other();
    this.pain();
  },
  methods: {
    onScroll() {
      this.logStatus = 1;
      if (this.noData === true) {
        this.logStatus = 2;
        return false;
      }
      setTimeout(() => {
        if (this.oldList.length < this.newmap.length / 7) {
          this.currentPage += 1;
          this.logStatus = 0;
        } else {
          this.logStatus = 2;
          this.noData = true;
        }
        if (this.newsList.length < this.oldmap.length / 7) {
          this.currentpa += 1;
          this.logStatus = 0;
        } else {
          this.logStatus = 2;
          this.noData = true;
        }
      }, 500);
    },
     other() {
      let pages = Math.ceil(this.newmap.length / 7);
      const newList = [];
      for (let i = 0; i < pages; i++) {
        let sonList = [];
        sonList = this.newmap.slice(i * 7, i * 7 + 7);
        // newList.push(sonList);
      }

      this.oldList.push(newList[this.currentPage - 1]);
    },
    pain() {
      let pages = Math.ceil(this.oldmap.length / 7);
      const loList = [];
      for (let i = 0; i < pages; i++) {
        let sonList = [];
        sonList = this.oldmap.slice(i * 7, i * 7 + 7);
        loList.push(sonList);
      }

      this.newsList.push(loList[this.currentpa - 1]);
    },
  async start() {
      const add=[]
      const schoolstudentid = wx.getStorageSync("loginUserInfo").ID;

      var that = this;
      //班级
      await wx.request({
        url: this.$interfaces.class+"/"+schoolstudentid,
        method: "get",
        success: function(res) {
          //班级是否在读
          if (res.data.type == "在读") {
            const ID = res.data.schoolclazzid
             wx.request({
              url: that.$interfaces.banclass+"/"+ID,
              method: "get",
              success: function(lo) {
               const schoolclazzid= lo.data.ID

                 wx.request({
              url: that.$interfaces.banlength+"/"+schoolclazzid,
              method: "get",
              success: function(lok) {
                 for(var i=0;i< lok.data.data.length;i++){
                   if(lok.data.data[i].schoolclazzstudentcalendar!=""){
                     // var o = {'zhuteacher':res.data.data[i].schooluserids,'teacher':res.data.data[i].schooluserid,'key':res.data.data[i].ID,'title':leis.data.name,'schooltime':res.data.data[i].schoolclasstime,'content':res.data.data[i].info,'classban':res.data.data[i].schoolclassroomid,'start':Date.parse(new Date(res.data.data[i].createdAt))}
                      var o = {'schooluserids':lok.data.data[i].schooluserids,'info':lok.data.data[i].info,'schoolclazzstudentcalendarID':lok.data.data[i].schoolclazzstudentcalendar[0].ID,'type':lok.data.data[i].schoolclazzstudentcalendar[0].type,'hours':lok.data.data[i].hour,'teacher':lok.data.data[i].schooluser.name,'key':lok.data.data[i].ID,'schooltime':lok.data.data[i].schoolclasstime,'title':lok.data.data[i].schoolclazz.name,'classban':lok.data.data[i].schoolclassroom.name,'start':Date.parse(new Date(lok.data.data[i].createdAt))}
                       that.allLessons.push(o)
                   }else{
                     // var o = {'zhuteacher':res.data.data[i].schooluserids,'teacher':res.data.data[i].schooluserid,'key':res.data.data[i].ID,'title':leis.data.name,'schooltime':res.data.data[i].schoolclasstime,'content':res.data.data[i].info,'classban':res.data.data[i].schoolclassroomid,'start':Date.parse(new Date(res.data.data[i].createdAt))}
                      var o = {'schooluserids':lok.data.data[i].schooluserids,'info':lok.data.data[i].info,'hours':lok.data.data[i].hour,'teacher':lok.data.data[i].schooluser.name,'key':lok.data.data[i].ID,'schooltime':lok.data.data[i].schoolclasstime,'title':lok.data.data[i].schoolclazz.name,'classban':lok.data.data[i].schoolclassroom.name,'start':Date.parse(new Date(lok.data.data[i].createdAt))}
                       that.allLessons.push(o)
                   }
                 }
                 that.less()
              }
                 })
              }
             })

            wx.request({
              url: that.$interfaces.studengtcalender+"/"+schoolstudentid,
              method: "get",
              success: function(leis) {
                console.log(leis.data.data)
                    for(var i=0;i< leis.data.data.length;i++){
                      // var o = {'zhuteacher':res.data.data[i].schooluserids,'teacher':res.data.data[i].schooluserid,'key':res.data.data[i].ID,'title':leis.data.name,'schooltime':res.data.data[i].schoolclasstime,'content':res.data.data[i].info,'classban':res.data.data[i].schoolclassroomid,'start':Date.parse(new Date(res.data.data[i].createdAt))}
                       var o = {'schooluserids':leis.data.data[i].schoolclazzschedule.schooluserids,'info':leis.data.data[i].info,'grade':leis.data.data[i].grade,'data':leis.data.data[i].data,'type':leis.data.data[i].type,'teacher':leis.data.data[i].schoolclazzschedule.schooluser.name,'key':leis.data.data[i].ID,'schooltime':leis.data.data[i].schoolclazzschedule.schoolclasstime,'title':leis.data.data[i].schoolclazzschedule.schoolclazz.name,'classban':leis.data.data[i].schoolclazzschedule.schoolclassroom.name,'start':Date.parse(new Date(leis.data.data[i].schoolclazzschedule.createdAt))}
                        that.demoEventss.push(o)
                  }
                  that.jhg()

              }
            });
          }
        }
      })
    },
    jhg(){

      var list = {};
      for (var i = 0, l = this.demoEventss.length; i < l; i++) {
        var key;
        if (new Date(this.demoEventss[i]["start"]).getDay() == 0)
          key =
            new Date(this.demoEventss[i]["start"]).getFullYear() +
            "年" +
            (new Date(this.demoEventss[i]["start"]).getMonth() + 1) +
            "月" +
            new Date(this.demoEventss[i]["start"]).getDate() +
            "日" +
            "   " +
            "星期日";
        if (new Date(this.demoEventss[i]["start"]).getDay() == 1)
          key =
            new Date(this.demoEventss[i]["start"]).getFullYear() +
            "年" +
            (new Date(this.demoEventss[i]["start"]).getMonth() + 1) +
            "月" +
            new Date(this.demoEventss[i]["start"]).getDate() +
            "日" +
            "   " +
            "星期一";
        if (new Date(this.demoEventss[i]["start"]).getDay() == 2)
          key =
            new Date(this.demoEventss[i]["start"]).getFullYear() +
            "年" +
            (new Date(this.demoEventss[i]["start"]).getMonth() + 1) +
            "月" +
            new Date(this.demoEventss[i]["start"]).getDate() +
            "日" +
            "   " +
            "星期二";
        if (new Date(this.demoEventss[i]["start"]).getDay() == 3)
          key =
            new Date(this.demoEventss[i]["start"]).getFullYear() +
            "年" +
            (new Date(this.demoEventss[i]["start"]).getMonth() + 1) +
            "月" +
            new Date(this.demoEventss[i]["start"]).getDate() +
            "日" +
            "   " +
            "星期三";
        if (new Date(this.demoEventss[i]["start"]).getDay() == 4)
          key =
            new Date(this.demoEventss[i]["start"]).getFullYear() +
            "年" +
            (new Date(this.demoEventss[i]["start"]).getMonth() + 1) +
            "月" +
            new Date(this.demoEventss[i]["start"]).getDate() +
            "日" +
            "   " +
            "星期四";
        if (new Date(this.demoEventss[i]["start"]).getDay() == 5)
          key =
            new Date(this.demoEventss[i]["start"]).getFullYear() +
            "年" +
            (new Date(this.demoEventss[i]["start"]).getMonth() + 1) +
            "月" +
            new Date(this.demoEventss[i]["start"]).getDate() +
            "日" +
            "   " +
            "星期五";
        if (new Date(this.demoEventss[i]["start"]).getDay() == 6)
          key =
            new Date(this.demoEventss[i]["start"]).getFullYear() +
            "年" +
            (new Date(this.demoEventss[i]["start"]).getMonth() + 1) +
            "月" +
            new Date(this.demoEventss[i]["start"]).getDate() +
            "日" +
            "   " +
            "星期六";
        list[key] = list[key] || (list[key] = []);
        if (this.demoEventss[i].schooltime.split(":")[0] == 8) {
          this.demoEventss[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_8.png";
        } else if (this.demoEventss[i].schooltime.split(":")[0] == 9) {
          this.demoEventss[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_9.png";
        } else if (this.demoEventss[i].schooltime.split(":")[0] == 10) {
          this.demoEventss[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_10.png";
        } else if (this.demoEventss[i].schooltime.split(":")[0] == 11) {
          this.demoEventss[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_11.png";
        } else if (this.demoEventss[i].schooltime.split(":")[0] == 12) {
          this.demoEventss[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_12.png";
        } else if (this.demoEventss[i].schooltime.split(":")[0] == 13) {
          this.demoEventss[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_13.png";
        } else if (this.demoEventss[i].schooltime.split(":")[0] == 14) {
          this.demoEventss[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_14.png";
        } else if (this.demoEventss[i].schooltime.split(":")[0] == 15) {
          this.demoEventss[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_15.png";
        } else if (this.demoEventss[i].schooltime.split(":")[0] == 16) {
          this.demoEventss[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_16.png";
        } else if (this.demoEventss[i].schooltime.split(":")[0] == 17) {
          this.demoEventss[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_17.png";
        } else if (this.demoEventss[i].schooltime.split(":")[0] == 18) {
          this.demoEventss[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_18.png";
        } else if (this.demoEventss[i].schooltime.split(":")[0] == 19) {
          this.demoEventss[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_19.png";
        } else if (this.demoEventss[i].schooltime.split(":")[0] == 20) {
          this.demoEventss[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_20.png";
        } else if (this.demoEventss[i].schooltime.split(":")[0] == 21) {
          this.demoEventss[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_21.png";
        }
        list[key].push(this.demoEventss[i]);
      }
      for (let i in list) {
        var o = {
          m: i,
          n: list[i].sort(function(a, b) {
            return a.schooltime.split(":")[0] - b.schooltime.split(":")[0];
          })
        };
        this.map.push(o);
      }
      this.map.sort((a, b) => {
        const ahh = a.m.split(" ")[0].replace(/[年月]/g, "-");
        const okm = ahh.replace(/[日]/, "");
        const Lessthan = b.m.split(" ")[0].replace(/[年月]/g, "-");
        const morethan = Lessthan.replace(/[日]/, "");
        return new Date(okm).getTime() < new Date(morethan).getTime() ? -1 : 1;
      });
      for (var item of this.map) {
        const ahh = item.m.split(" ")[0].replace(/[年月]/g, "-");
        const okm = ahh.replace(/[日]/, "");
        if (new Date(okm).getTime() < this.newtime) {
          this.newmap.push(item);
        } else {
          this.oldmap.push(item);
        }
      }
    },
    less(){

        var list = {};
      for (var i = 0, l = this.allLessons.length; i < l; i++) {
        var key;
        if (new Date(this.allLessons[i]["start"]).getDay() == 0)
          key =
            new Date(this.allLessons[i]["start"]).getFullYear() +
            "年" +
            (new Date(this.allLessons[i]["start"]).getMonth() + 1) +
            "月" +
            new Date(this.allLessons[i]["start"]).getDate() +
            "日" +
            "   " +
            "星期日";
        if (new Date(this.allLessons[i]["start"]).getDay() == 1)
          key =
            new Date(this.allLessons[i]["start"]).getFullYear() +
            "年" +
            (new Date(this.allLessons[i]["start"]).getMonth() + 1) +
            "月" +
            new Date(this.allLessons[i]["start"]).getDate() +
            "日" +
            "   " +
            "星期一";
        if (new Date(this.allLessons[i]["start"]).getDay() == 2)
          key =
            new Date(this.allLessons[i]["start"]).getFullYear() +
            "年" +
            (new Date(this.allLessons[i]["start"]).getMonth() + 1) +
            "月" +
            new Date(this.allLessons[i]["start"]).getDate() +
            "日" +
            "   " +
            "星期二";
        if (new Date(this.allLessons[i]["start"]).getDay() == 3)
          key =
            new Date(this.allLessons[i]["start"]).getFullYear() +
            "年" +
            (new Date(this.allLessons[i]["start"]).getMonth() + 1) +
            "月" +
            new Date(this.allLessons[i]["start"]).getDate() +
            "日" +
            "   " +
            "星期三";
        if (new Date(this.allLessons[i]["start"]).getDay() == 4)
          key =
            new Date(this.allLessons[i]["start"]).getFullYear() +
            "年" +
            (new Date(this.allLessons[i]["start"]).getMonth() + 1) +
            "月" +
            new Date(this.allLessons[i]["start"]).getDate() +
            "日" +
            "   " +
            "星期四";
        if (new Date(this.allLessons[i]["start"]).getDay() == 5)
          key =
            new Date(this.allLessons[i]["start"]).getFullYear() +
            "年" +
            (new Date(this.allLessons[i]["start"]).getMonth() + 1) +
            "月" +
            new Date(this.allLessons[i]["start"]).getDate() +
            "日" +
            "   " +
            "星期五";
        if (new Date(this.allLessons[i]["start"]).getDay() == 6)
          key =
            new Date(this.allLessons[i]["start"]).getFullYear() +
            "年" +
            (new Date(this.allLessons[i]["start"]).getMonth() + 1) +
            "月" +
            new Date(this.allLessons[i]["start"]).getDate() +
            "日" +
            "   " +
            "星期六";
        list[key] = list[key] || (list[key] = []);
        if (this.allLessons[i].schooltime.split(":")[0] == 8) {
          this.allLessons[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_8.png";
        } else if (this.allLessons[i].schooltime.split(":")[0] == 9) {
          this.allLessons[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_9.png";
        } else if (this.allLessons[i].schooltime.split(":")[0] == 10) {
          this.allLessons[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_10.png";
        } else if (this.allLessons[i].schooltime.split(":")[0] == 11) {
          this.allLessons[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_11.png";
        } else if (this.allLessons[i].schooltime.split(":")[0] == 12) {
          this.allLessons[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_12.png";
        } else if (this.allLessons[i].schooltime.split(":")[0] == 13) {
          this.allLessons[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_13.png";
        } else if (this.allLessons[i].schooltime.split(":")[0] == 14) {
          this.allLessons[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_14.png";
        } else if (this.allLessons[i].schooltime.split(":")[0] == 15) {
          this.allLessons[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_15.png";
        } else if (this.allLessons[i].schooltime.split(":")[0] == 16) {
          this.allLessons[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_16.png";
        } else if (this.allLessons[i].schooltime.split(":")[0] == 17) {
          this.allLessons[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_17.png";
        } else if (this.allLessons[i].schooltime.split(":")[0] == 18) {
          this.allLessons[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_18.png";
        } else if (this.allLessons[i].schooltime.split(":")[0] == 19) {
          this.allLessons[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_19.png";
        } else if (this.allLessons[i].schooltime.split(":")[0] == 20) {
          this.allLessons[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_20.png";
        } else if (this.allLessons[i].schooltime.split(":")[0] == 21) {
          this.allLessons[i].img =
            "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/course_21.png";
        }

        list[key].push(this.allLessons[i]);
      }
      for (let i in list) {
        var o = {
          m: i,
          n: list[i].sort(function(a, b) {
            return a.schooltime.split(":")[0] - b.schooltime.split(":")[0];
          })
        };
        this.alreadyclass.push(o);
      }
      this.alreadyclass.sort((a, b) => {
        const ahh = a.m.split(" ")[0].replace(/[年月]/g, "-");
        const okm = ahh.replace(/[日]/, "");
        const Lessthan = b.m.split(" ")[0].replace(/[年月]/g, "-");
        const morethan = Lessthan.replace(/[日]/, "");
        return new Date(okm).getTime() < new Date(morethan).getTime() ? -1 : 1;
      });
      for (var item of this.map) {
        const ahh = item.m.split(" ")[0].replace(/[年月]/g, "-");
        const okm = ahh.replace(/[日]/, "");
        if (new Date(okm).getTime() < this.newtime) {
          this.newmap.push(item);

        } else {
          this.oldmap.push(item);
        }
      }
    },
    handleChange(detail) {
      this.current = detail.mp.detail.key;
      if (detail.mp.detail.key === "tab1") {
        this.tab11 = true;
        this.tab12 = false;
      } else if (detail.mp.detail.key === "tab2") {
        this.tab11 = false;
        this.tab12 = true;
      }
    },
    bindViewTap() {
      const url = "../logs/main";
      if (mpvuePlatform === "wx") {
        mpvue.switchTab({ url });
      } else {
        mpvue.navigateTo({ url });
      }
    },
    clickHandle(ev) {
      console.log("clickHandle:", ev);
      // throw {message: 'custom test'}
    }
  },

  created() {
    // let app = getApp()
  }
};
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}
.all {
  width: 7.5rem;
  height: 1rem;
  background-color: blue;
}
.all:after {
  display: block;
  content: "";
  clear: both;
}
.left {
  float: left;
  width: 3rem;
  height: 1rem;
  background-color: red;
}

.right {
  float: left;
  width: 4.5rem;
  height: 1rem;
  background-color: green;
}
.swiper-item {
  width: 100%;
  display: block;
  height: 150px;
}
.slide-image {
  height: 100%;
  width: 100%;
  display: inline-block;
  overflow: hidden;
}
.swiper {
  height: 260rpx;
  width: 100%;
}
.list {
  margin-bottom: 15rpx;
  background-color: #ffffff;
  overflow: hidden;
  position: relative;
  /* padding-top:30rpx; */
}
.bigbox {
  background-color: #eee;
}
.data-li {
  border: 1px solid black;
  border-radius: 5px;
  margin: 20rpx;
  padding: 20rpx;
}
.label {
  font-size: 13px;
  color: #ffffff;
  line-height: 38px;
  background: red;
  position: absolute;
  right: 0;
  z-index: 2;
  padding: 0 2em;
  -webkit-transform-origin: left bottom;
  -moz-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: translate(29.29%, -100%) rotate(45deg);
  -moz-transform: translate(29.29%, -100%) rotate(45deg);
  transform: translate(29.29%, -100%) rotate(45deg);
  text-indent: 0;
}
.labels {
  font-size: 13px;
  color: #ffffff;
  line-height: 38px;
  background: orange;
  position: absolute;
  right: 0;
  z-index: 2;
  padding: 0 2em;
  -webkit-transform-origin: left bottom;
  -moz-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: translate(29.29%, -100%) rotate(45deg);
  -moz-transform: translate(29.29%, -100%) rotate(45deg);
  transform: translate(29.29%, -100%) rotate(45deg);
  text-indent: 0;
}
.lab {
  font-size: 23rpx;
  color: #ffffff;
  line-height: 46rpx;
  background: green;
  position: absolute;
  right: 0;
  z-index: 2;
  top: 0;
  padding: 0 2em;
  border-radius: 2px;
}
.lab1 {
  font-size: 23rpx;
  color: #ffffff;
  line-height: 46rpx;
  background: orange;
  position: absolute;
  right: 0;
  z-index: 2;
  top: 0;
  padding: 0 2em;
  border-radius: 2px;
}
.lab2 {
  font-size: 23rpx;
  color: #ffffff;
  line-height: 46rpx;
  background: red;
  position: absolute;
  right: 0;
  z-index: 2;
  top: 0;
  padding: 0 2em;
  border-radius: 2px;
}
.lab3 {
  font-size: 23rpx;
  color: #ffffff;
  line-height: 46rpx;
  background: blue;
  position: absolute;
  right: 0;
  z-index: 2;
  top: 0;
  padding: 0 2em;
  border-radius: 2px;
}
.laodMore {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #ccc;
  text-align: center;
}
</style>
